import React, { Component } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { connect } from 'dva'
import {
    Card,
    Tooltip,
    Button,
    Form,
    Input,
    Select,
    DatePicker,
    Spin,
    Row,
    Col,
    Tabs,
    Pagination,
    Modal,
    InputNumber,
    Tag, Icon, Radio, message
} from 'antd'
import MyPageTable from '@/components/MyPageTable'
import { getParam, onTableData } from '@/utils/utils.js'
import CopyToClipboard from '@/components/CopyToClipboard'
import { getTimeDistance } from '@/utils/utils'
import moment from 'moment'
import { orderCloseStatusMap, orderStatusMap } from '@/utils/enum'
import { p } from 'puppeteer/lib/USKeyboardLayout'
import {orderRemark} from "@/services/order";
import {exportQueryOrderByConditionExt} from "@/services/login";

const { Option } = Select
const { RangePicker } = DatePicker
const { TabPane } = Tabs
const { TextArea } = Input

@connect(({ order, loading }) => ({
  ...order,
  loading: loading.effects['order/queryOrderByConditionExt']
}))
@Form.create()
export default class HomePage extends Component {
  state = {
    current: 1,
    visible: '',
    orderId: null,
    datas: {},
    record: {},
    expressList: [],
    yunTime: getTimeDistance('month'),
    gBtusua: '', // 默认状态: 全部
    remarkVisible: false,
    orderVisible: false,
    remarkId: '',
    remarkList: [],
    finishedOrderVisible: false,
    finishedOrderId: '',
    antchainVisible: false,
    antChainData: [],
    insuranceVisible: false,
    insuranceData: '',
    orderDefaultDeposit: 0,
  }

  columns = [
    {
      title: '订单编号',
      dataIndex: 'orderId',
      width: 160,
      render: orderId => <CopyToClipboard text={orderId} />
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      width: 160, // ellipsis: true,,
      render:(text, record) =>{
        return (
          <span>{record.productInfo.productName}</span>
        )
      }
    },
    {
      title: '商品规格',
      dataIndex: 'spec',
      width: 160, // ellipsis: true,,
      render:(text, record) =>{
        return (
          <span>{record.productInfo.spec}</span>
        )
      }
    },
    // {
    //   title: '渠道编号',
    //   dataIndex: 'platform',
    //   width: 120,
    //   render:(text, record) =>{
    //     return (
    //       <span>{record.backstageUserOrderDto.platform}</span>
    //     )
    //   }
    // },
    {
      title: '下单时间',
      dataIndex: 'placeOrderTime',
      width: 120,
      render:(text, record) =>{
        return (
          <span>{record.userOrderInfoDto.createTime}</span>
        )
      }
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      width: 120,
      render: (text, record) => {
          return (
            <span>
              {record.status}
            </span>
          )

      }
    },

    {
      title: '下单人姓名',
      width: 120,
      render: e => {
        return <>{e.userName}</>
      }
    },
    {
      title: '下单人手机号',
      width: 140,
      render:(text, record) =>{
        return (
          <span>{record.userOrderInfoDto.telephone}</span>
        )
      }
    },
    // {
    //   title: '收货地址',
    //   width: '120px',
    //   render: e => {
    //     return <>{e.orderAddressDto.street}</>
    //   }
    // },
    // {
    //   title: '审核员',
    //   width: '120px',
    //   render: e => {
    //     return <>{e.auditorName}</>
    //   }
    // },
    {
      title: '账单金额',
      width: '120px',
      render: e => {
        return <>{e.backstageUserOrderDto.totalRentAmount}元</>
      }
    },
    {
      title: '已付租赁金额',
      width: '120px',
      render: e => {
        return <>{e.backstageUserOrderDto.payedRentAmount}元</>
      }
    },
    {
      title: '剩余租金金额',
      width: '120px',
      render: e => {
        return <>{e.backstageUserOrderDto.unPayRentAmount}元</>
      }
    },
    // {
    //   title: '已付增值服务费用',
    //   width: '120px',
    //   render: e => {
    //     return <>{e.backstageUserOrderDto.alreadyPayAdditionalAmount || 0}元  </>
    //   }
    // },
    {
      title: '备注',
      width: '120px',
      render: (text, record) => {
        return <><span>
          {record.customerAttendanceRemark}
            <a  onClick={() =>
              this.showOrderModal('remark',
                  record.backstageUserOrderDto.orderId,
                  record.customerAttendanceId && record.customerAttendanceId,
                  record.customerAttendanceRemark,
                  record.videoFlag,
                  record.contractFlag


              )
            }>
              <Icon type="edit" />
              {/*修改*/}
            </a>
        </span></>
      }
    },
    {
      title: '操作',
      width: 120,
      fixed: 'right',
      align: 'center',
      render: (e, record) => {
        return (
          <div>
            <a
              className="primary-color"
              // onClick={() => router.push(`/Order/Details?id=${e.orderId}`)}
              href={`#/Order/HomePage/Details?id=${e.orderId}`}
              target="_blank"
            >
              详情
            </a>
          </div>
        )
      }
    }
  ]


  // tab数据组合
  tabsData = [
    {
      title: '全部',
      key: '0',
      code: '99',
      count: 0
    },
    {
      title: '待支付',
      key: '1',
      code: '01',
      count: 0
    },
    {
      title: '待审批',
      key: '2',
      code: '11',
      count: 0
    },
    {
      title: '待发货',
      key: '3',
      code: '04',
      count: 0
    },
    {
      title: '待确认收货',
      key: '4',
      code: '05',
      count: 0
    },
    {
      title: '租用中',
      key: '5',
      code: '06',
      count: 0
    },
    {
      title: '待结算',
      key: '6',
      code: '07',
      count: 0
    },
    {
      title: '结算待支付',
      key: '7',
      code: '08',
      count: 0
    },
    {
      title: '待归还',
      key: '8',
      code: '12',
      count: 0
    },
    {
      title: '订单完成',
      key: '9',
      code: '09',
      count: 0
    },
    {
      title: '交易关闭',
      key: '10',
      code: '10',
      count: 0
    }
  ]

  // tab配置参数
  tabState = {
    activeKey: this.tabsData[0].key,
    panes: this.tabsData
  }

  // 上链类型枚举
  chainType = {
    product: '商品信息上链',
    user: '用户信息上链',
    order: '订单信息上链',
    orderProduct: '订单商品信息上链',
    logistic: '物流信息上链',
    leasePromise: '承诺信息上链',
    insurance: '投保信息',
    rental: '履约信息'
  }

  componentDidMount() {
    const { status } = this.props.location.query
    if (status) {
      this.setState(
        {
          gBtusua: status
        },
        () => {
          this.props.form.setFieldsValue({
            status
          })
          this.onList(1, 10, { status: [status] ,exportFlag:false})
          // this.getExpressList();
        }
      )
    } else {
      this.onList(1, 10,{exportFlag:false})
      // this.getExpressList();
    }

    this.props.dispatch({
      type: 'order/PlateformChannel'
    })

    this.props.dispatch({
      type: 'order/queryOrderGroupCountByCondition',
      payload: {
        pageSize: 10,
        pageNumber: 1
      }
    })
    // this.props.dispatch({
    //   type: 'order/queryOrderByConditionExt', payload: {
    //     pageSize: 10, pageNumber: 1,
    //   },
    // });
  }

  // 查询订单列表
  onList = (pageNumber, pageSize, data = {}) => {
    const { dispatch } = this.props
    const { gBtusua } = this.state

    // dispatch({
    //   type: 'order/queryOpeOrderByConditionList', // type: 'order/queryOrderByConditionExt',
    //   payload: {
    //     pageSize, pageNumber, ...data,
    //   },
    // });

    // if (data.status === '99' || !data.status) {
    //   data.status = [];
    // } else if (data.status === '11') {
    //   data.status = ['11', '13'];
    // } else {
    //   data.status = [data.status];
    // }
    if (gBtusua === '99' || !gBtusua) {
      data.status = []
    } else if (gBtusua === '11') {
      data.status = ['11', '13', '15']
    } else {
      data.status = [gBtusua]
    }

    this.setState({
      current: pageNumber
    })

    dispatch({
      type: 'order/queryOrderByConditionExt',
      payload: {
        pageSize,
        pageNumber,
        ...data
      }
    })
  }

  // 重置
  handleReset = e => {
    // this.setState({
    //   gBtusua: '',
    // }, () => {
    this.props.form.resetFields()
    this.handleSubmit(e)
    // },);
  }

  // 表单查询
  handleSubmit = e => {
    e && e.preventDefault()
    this.props.form.validateFields(['productName','userName','telephone',
        'platform','addressUserPhone','idCard','orderId','createDate','auditName'

        ],
        (err, values) => {
      console.log('Received values of form: ', values)
      if (values.createDate && values.createDate.length < 1) {
        values.createTimeStart = ''
        values.createTimeEnd = ''
        this.setState(
          {
            datas: { ...values }
          },
          () => {
            this.onList(1, 10, { ...values ,exportFlag:false})
          }
        )
      } else if (values.createDate) {
        values.createTimeStart = moment(values.createDate[0]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        values.createTimeEnd = moment(values.createDate[1]).format(
          'YYYY-MM-DD HH:mm:ss'
        )
        this.setState(
          {
            datas: { ...values }
          },
          () => {
            this.onList(1, 10, { ...values ,exportFlag:false})
          }
        )
      } else {
        this.setState(
          {
            datas: { ...values }
          },
          () => {
            this.onList(1, 10, { ...values,exportFlag:false })
          }
        )
      }
    })
  }
  RemarkEdit =() =>{

  }
  onexport = () => {
    const { yunTime } = this.state;
     const createTimeStart = this.props.form.getFieldValue('createDate') && this.props.form.getFieldValue('createDate')[0]
      const createTimeEnd = this.props.form.getFieldValue('createDate') && this.props.form.getFieldValue('createDate')[1]
      exportQueryOrderByConditionExt({ ...this.state.datas , pageNumber: this.state.current, pageSize: 10,
          createTimeStart:createTimeStart ? moment(createTimeStart).format('YYYY-MM-DD 00:00:00'):'',
          createTimeEnd:createTimeEnd ? moment(createTimeEnd).format('YYYY-MM-DD 23:59:59'):'',
          exportFlag:true
      }).then(res => {
          const objectURL = res && URL.createObjectURL(res)
          const btn = document.createElement('a')
          const body = document.querySelector('body')
          if (body) {
              body.appendChild(btn)
          }
          btn.download = `订单客勤表.xlsx`
          btn.href = objectURL
          btn.click()
          if (body) {
              body.removeChild(btn) // 删除标签
          }

          message.success('导出成功')
      })
  };

  handleCancel = e => {
    this.setState({
      visible: ''
    })
  }

  // table 页数
  onPage = e => {
    this.setState(
      {
        current: e.current,
        pageSize:e.pageSize
      },
      () => {
        const params = {
          ...this.state.datas,
          exportFlag:false
        }
        this.onList(e.current, e.pageSize, params)
      }
    )
  }

  onChanges = e => {
    this.setState({
      gBtusua: e
    })
  }

  tabClick = activeKey => {
    let status = '99'
    this.tabsData.map(val => {
      if (val.key === activeKey) {
        status = val.code
      }
    })

    if (status === '99') {
      status = ''
    }

    this.setState(
      {
        gBtusua: status
      },
      () => {
        // this.props.form.resetFields()
        const params = {
          ...this.state.datas,
          exportFlag:false
        }
        this.onList(1, 10,params)
      }
    )
  }

  showOrderModal = (type, id,id1,customerAttendanceRemark,videoFlag,contractFlag) => {
    this.props.form.setFieldsValue({
      contractFlag: contractFlag ==='是' ?'true' :'false' ||'false',
      videoFlag: videoFlag ==='是' ?'true' :'false' ||'false',
    })
    this.setState({
      remarkId: id,
      orderVisible: type,
      id:id1,
      remark:customerAttendanceRemark,

    })

  }

  showRemarkListModal = (type, obj) => {
    this.setState({
      remarkList: obj,
      orderVisible: type
    })
  }

  remarkCancel = e => {
    this.setState({
      remarkVisible: false,
      orderVisible: false,
      orderDefaultDeposit: 0
    })
    this.props.form.resetFields(['beizhu','contractFlag','videoFlag'])
  }

  // 打开蚂蚁链信息模态框
  showAntchainModal = orderId => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/getChainInfoByOrderId',
      payload: {
        orderId: orderId
      },
      callback: res => {
        let resData = res.data
        console.log(resData)
        resData.map(val => {
          console.log(val)
          let chainStr = ''
          if (val.content) {
            val.content = JSON.parse(val.content)
          }
          console.log(val.content)
          if (val.recordType === 'product') {
            chainStr += `【商品Id】：${val.content.productId}；`
            chainStr += `【商品品牌】：${val.content.productBrand}；`
            chainStr += `【商品信息】：${val.content.productDetailInfo}；`
            chainStr += `【商品价格】：${val.content.productPrice / 10000}元；`
            // chainStr += `【押金金额】：${val.content.depositPrice / 10000}元。`
          }
          if (val.recordType === 'user') {
            chainStr += `【用户名称】：${val.content.userName}；`
            chainStr += `【用户手机】：${val.content.userPhoneNumber}；`
            chainStr += `【用户身份证】：${val.content.userId}。`
          }
          if (val.recordType === 'order') {
            chainStr += `【订单Id】：${val.content.orderId}；`
            chainStr += `【订单创建时间】：${val.content.orderCreateTime}；`
            chainStr += `【订单支付时间】：${val.content.orderPayTime}；`
            chainStr += `【订单支付Id】：${val.content.orderPayId}；`
            chainStr += `【订单支付类型】：预授权；`
            // chainStr += `【免押金额】：${val.content.depositFree / 10000}元；`
            chainStr += `【实际授权金额】：${val.content.acutalPreAuthFree /
              10000}元；`
            chainStr += `【租期】：${val.content.rentTerm}；`
            chainStr += `【月租金】：${val.content.rentPricePerMonth /
              10000}元；`
            chainStr += `【到期买断价】：${val.content.buyOutPrice / 10000}元；`
            chainStr += `【租赁合同地址】：${val.content.leaseContractUrl}；`
            chainStr += `【收货地址】：${val.content.userAddress}；`
            chainStr += `【租金总额】：${val.content.totalRentMoney /
              10000}元；`
            chainStr += `【蚁盾分】：${val.content.yidunScore}。`
          }
          if (val.recordType === 'orderProduct') {
            chainStr += `【商品Id】：${val.content.productInfo[0].productId}；`
            chainStr += `【商品名称】：${val.content.productInfo[0].productName}；`
            chainStr += `【商品价格】：${val.content.productInfo[0]
              .productPrice / 10000}元。`
          }
          if (val.recordType === 'logistic') {
            chainStr += `【物流名称】：${val.content.logisticCompanyName}；`
            chainStr += `【物流单号】：${val.content.logisticsOrderId}；`
            chainStr += `【物流时间】：${val.content.deliverTime}；`
            chainStr += `【物流状态】：${
              val.content.logisticStatus === 1
                ? '已发货'
                : val.content.logisticStatus === 2
                ? '运输中'
                : val.content.logisticStatus === 3
                ? '已签收'
                : '其他'
            }。`
          }
          if (val.recordType === 'leasePromise') {
            chainStr += `分期账单列表：`
            for (let i = 0; i < val.content.payDateList.length; i++) {
              chainStr += `【${i + 1}期】${val.content.payDateList[i].substr(
                0,
                10
              )} -> ${val.content.payMoneyList[i] / 10000}元；`
            }
          }
          if (val.recordType === 'insurance') {
            if (val.content) {
              chainStr += `【投保状态】：投保成功;`
              chainStr += `【保单号】：${val.content.policyNo};`
              chainStr += `【保险开始时间】：${val.content.insuranceStartTime};`
              chainStr += `【保险结束时间】：${val.content.insuranceEndTime};`
              chainStr += `【投保时间】：${val.content.insureDate};`
              chainStr += `【保费】：${val.content.premium / 100}元;`
              chainStr += `【保险缴费单号】：${val.content.exchangeNo};`
              chainStr += `【保单下载地址】：${val.content.policyUrl}`
              chainStr += `【保单存证上链地址】：${val.content.txHash}。`
            } else {
              chainStr += `【投保状态】：投保失败;`
              chainStr += `【投保结果】：${val.contentError}。`
            }
          }
          if (val.recordType === 'rental') {
            chainStr += `【租期期数】：${val.content.leaseTermIndex} ;`
            chainStr += `【归还金额】：${val.content.rentalMoney / 10000}元;`
            chainStr += `【归还时间】：${val.content.returnTime};`
          }
          val.chainStr = chainStr
          return val
        })
        this.setState({
          antChainData: resData.reverse(),
          antchainVisible: true
        })
      }
    })
  }

  // 关闭蚂蚁信息模态框
  antchainCancel = e => {
    this.setState({
      antchainVisible: false
    })
  }

  // 打开投保信息模态框
  showInsuranceModal = orderId => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/getChainInfoByOrderId',
      payload: {
        orderId: orderId
      },
      callback: res => {
        let resData = res.data.reverse()
        let tmpInsuranceData = ''
        for (let i = 0; i < resData.length; i++) {
          if (resData[i].recordType === 'insurance') {
            if (resData[i].content) {
              resData[i].content = JSON.parse(
                resData[i].content.replace(/[\\]/g, '')
              )
              tmpInsuranceData = resData[i].content
              break
            }
          }
        }
        this.setState({
          insuranceData: tmpInsuranceData,
          insuranceVisible: true
        })
      }
    })
  }

  // 待归还状态关闭订单
  closeOrder = () => {
    const { dispatch } = this.props
    const { finishedOrderId } = this.state
    dispatch({
      type: 'order/finishedOrder',
      payload: {
        orderId: finishedOrderId
      },
      callback: res => {
        console.log(res)
      }
    })
    this.finishedOrderCancel()
    this.onPage()
  }

  // 关闭投保信息模态框
  insuranceCancel = e => {
    this.setState({
      insuranceVisible: false
    })
  }

  // 备注
  renderRemarkModal() {
    const { orderVisible,contractFlagValue,videoFlagValue,remark } = this.state
    const { getFieldDecorator,setFieldsValue } = this.props.form
    const orderId = this.state.remarkId
    const id = this.state.id
    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(['beizhu','contractFlag','videoFlag'], (err, values) => {
        if (!err) {
          const { dispatch } = this.props
          dispatch({
            type: 'order/saveOrUpdateOrderCustomerAttendance',
            payload: {
              orderId,
              remark: values.beizhu,
              contractFlag:JSON.parse(values.contractFlag),
              videoFlag:JSON.parse(values.videoFlag),
              id:id

            },
            callback: res => {
              this.remarkCancel()
              this.onList(this.state.current, 10,this.state.datas,{exportFlag:false})
            }
          })
        }
      })
    }

    return (
      <div>
        <Modal
          title="备注"
          visible={orderVisible === 'remark'}
          onOk={handleOk}
          onCancel={this.remarkCancel}
        >
          <Form>
            <Form.Item label="是否添加微信">
              {getFieldDecorator('contractFlag', {
                rules: [{ required: true, message: '请选择' }],
              })(
                  <Radio.Group >
                      <Radio value="true">是</Radio>
                      <Radio value="false">否</Radio>
                  </Radio.Group>
              )}
            </Form.Item>
            <Form.Item label="是否录入视频">
              {getFieldDecorator('videoFlag', {
                rules: [{ required: true, message: '请选择' }],
              })(
                  <Radio.Group >
                      <Radio value="true">是</Radio>
                      <Radio value="false">否</Radio>
                  </Radio.Group>
              )}
            </Form.Item>
            <Form.Item label="备注内容">
              {getFieldDecorator('beizhu', {
                rules: [{ required: false, message: '请输入备注' }],
                initialValue: this.state.remark
              })(<TextArea rows="5" placeholder="请输入" />)}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }

  // 备注列表
  renderRemarkListModal() {
    const { orderVisible } = this.state

    return (
      <div>
        <Modal
          title="备注详情"
          width="50%"
          bodyStyle={{ maxHeight: '450px', overflowY: 'scroll' }}
          visible={orderVisible === 'remarkList'}
          onCancel={this.remarkCancel}
          footer={[
            <Button key="back" onClick={this.remarkCancel}>
              关闭
            </Button>
          ]}
        >
          {this.state.remarkList.length > 0 ? (
            this.state.remarkList.map(item => (
              <p>
                {item.createTime}
                &emsp;<span style={{ color: '#999999' }}>备注内容：</span>
                <span style={{ borderBottom: '1px dashed #999' }}>
                  {item.remark}
                </span>
                &emsp;<span style={{ color: '#999999' }}>备注人：</span>
                <span style={{ borderBottom: '1px dashed #999' }}>
                  {item.userName}
                </span>
                &emsp;【{item.source === '02' ? '商家备注' : '平台备注'}】
              </p>
            ))
          ) : (
            <p>暂无备注</p>
          )}
        </Modal>
      </div>
    )
  }

  // 蚂蚁链信息
  renderAntChainModal() {
    const { antchainVisible } = this.state

    return (
      <div>
        <Modal
          title="蚂蚁链上链信息"
          width="50%"
          bodyStyle={{ maxHeight: '450px', overflowY: 'scroll' }}
          visible={antchainVisible}
          onCancel={this.antchainCancel}
          footer={[
            <Button key="back" onClick={this.antchainCancel}>
              关闭
            </Button>
          ]}
        >
          {this.state.antChainData.length > 0 ? (
            this.state.antChainData.map((item, index, arr) => (
              <p style={{ borderBottom: '1px dashed #389e0d' }}>
                <span style={{ color: '#389e0d' }}>{arr.length - index}. </span>
                <span style={{ color: '#999999' }}>上链类型：</span>
                {this.chainType[item.recordType]}
                <br />
                &emsp;<span style={{ color: '#999999' }}>上链时间：</span>
                <span style={{ borderBottom: '1px dashed #999' }}>
                  {item.createTime}
                </span>
                <br />
                &emsp;<span style={{ color: '#999999' }}>上链内容：</span>
                <span>{item.chainStr}</span>
              </p>
            ))
          ) : (
            <p>暂无上链信息</p>
          )}
        </Modal>
      </div>
    )
  }

  // 投保信息
  renderInsuranceModal() {
    const { insuranceVisible } = this.state

    return (
      <div>
        <Modal
          title="投保信息"
          width="55%"
          visible={insuranceVisible}
          onCancel={this.insuranceCancel}
          footer={[
            <Button key="back" onClick={this.insuranceCancel}>
              关闭
            </Button>
          ]}
        >
          <p>【投保单号】：{this.state.insuranceData.policyNo}</p>
          <p>【保险开始时间】：{this.state.insuranceData.insuranceStartTime}</p>
          <p>【保险结束时间】：{this.state.insuranceData.insuranceEndTime}</p>
          <p>【投保时间】：{this.state.insuranceData.insureDate}</p>
          <p>【投保费用】：{this.state.insuranceData.premium / 100}元</p>
          <p>【保险缴费单号】：{this.state.insuranceData.exchangeNo}</p>
          <p>
            【保单下载地址】：{' '}
            <a target="_blank" href={this.state.insuranceData.policyUrl}>
              点击下载电子保单
            </a>
          </p>
          <p>【保单存证上链地址】：{this.state.insuranceData.txHash}</p>
        </Modal>
      </div>
    )
  }

  showFinishedOrderModal = id => {
    this.setState({
      finishedOrderId: id,
      finishedOrderVisible: true
    })
  }

  finishedOrderCancel = e => {
    this.setState({
      finishedOrderId: '',
      finishedOrderVisible: false
    })
  }

  // 待归状态关闭订单模态框
  finishedOrderModal() {
    const { finishedOrderVisible } = this.state

    return (
      <div>
        <Modal
          title="交易完成"
          visible={finishedOrderVisible}
          onOk={this.closeOrder}
          onCancel={this.finishedOrderCancel}
        >
          <p style={{ textAlign: 'center', fontSize: '18px', color: 'red' }}>
            请确认商品已归还并收到货再执行此操作！
          </p>
        </Modal>
      </div>
    )
  }

  // 修改订单押金模态框
  renderOrderDeposit() {
    const { orderVisible, orderDefaultDeposit, remarkId } = this.state
    const { dispatch } = this.props

    const handleOk = e => {
      e.preventDefault()

      dispatch({
        type: 'order/modifyOrderDeposit',
        payload: {
          orderId: remarkId,
          freezePrice: orderDefaultDeposit
        },
        callback: res => {
          let { datas, current } = this.state
          this.remarkCancel()
          this.onList(current, 10, datas,{exportFlag:false})
        }
      })
    }

    const onChange = price => {
      this.setState({
        orderDefaultDeposit: price
      })
    }

    return (
      <div>
        <Modal
          title="修改押金"
          visible={orderVisible === 'modalOrderDeposit'}
          onOk={handleOk}
          onCancel={this.remarkCancel}
        >
          押金：
          <InputNumber value={orderDefaultDeposit} onChange={onChange} />
        </Modal>
      </div>
    )
  }

  // 检查是否存在逾期订单
  overdueCheck = e => {
    let isOverdue = false
    for (const value of e) {
      if (value.status == 4) {
        isOverdue = true
        break
      }
    }
    return isOverdue
  }

  render() {
    const {
      allList,
      allTotal,
      allListCount,
      allListExt,
      allTotalExt,
      loading,
      form
    } = this.props
    const { gBtusua } = this.state
    let _total = 0

    allListCount.map(val => {
      _total += val.count
    })

    this.tabsData[0].count = _total

    this.tabsData.map(val => {
      allListCount.map(v => {
        if (v.code === val.code) {
          val.count = v.count
        }

        // if (v.code === '11') {
        //   const count1 = allListCount.find(item => item.code === '11').count
        //   const count2 = allListCount.find(item => item.code === '13').count
        //   val.count = count1 + count2
        // }
      })
    })

    const a = this.tabsData.find(item => item.code === '11')
    if (allListCount.length) {
      const count1 = allListCount.find(item => item.code === '11').count
      const count2 = allListCount.find(item => item.code === '13').count
      const count3 = allListCount.find(item => item.code === '15').count
      a.count = count1 + count2 + count3
    }

    const paginationProps = {
      current: this.state.current,
      pageSize: 10,
      total: allTotalExt,
      showTotal: total => (
        <span style={{ fontSize: '14px' }}>
          <span>共{Math.ceil(total / 10)}页</span>&emsp;
          <span>共{total}条</span>
        </span>
      )
    }
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
    return (
      <PageHeaderWrapper>
        {this.renderRemarkModal()}
        {/* {this.renderOrderDeposit()} */}
        {this.renderRemarkListModal()}
        {this.renderAntChainModal()}
        {this.finishedOrderModal()}
        {this.renderInsuranceModal()}
        <Card bordered={false}>
          <Form
            style={{ paddingBottom: '30px' }}
            layout="inline"
            onSubmit={this.handleSubmit}
          >

                <Form.Item label="商品名称">
                  {getFieldDecorator(
                    'productName',
                    {}
                  )(<Input allowClear placeholder="请输入商品名称" />)}
                </Form.Item>

                <Form.Item label="下单人姓名">
                  {getFieldDecorator(
                    'userName',
                    {}
                  )(<Input allowClear placeholder="请输入下单人姓名" />)}
                </Form.Item>

                <Form.Item label="下单人手机号">
                  {getFieldDecorator(
                    'telephone',
                    {}
                  )(<Input allowClear placeholder="请输入下单人手机号" />)}
                </Form.Item>
            <Form.Item label="渠道编号">
              {getFieldDecorator(
                  'platform',
                  {}
              )(<Input allowClear placeholder="请输入渠道编号" />)}
            </Form.Item>
            <Form.Item label="审核员">
              {getFieldDecorator(
                'auditName',
                {}
              )(<Input allowClear placeholder="请输入审核员" />)}
            </Form.Item>
                <Form.Item label="收货人手机">
                  {getFieldDecorator(
                    'addressUserPhone',
                    {}
                  )(<Input allowClear placeholder="请输入收货人手机号" />)}
                </Form.Item>
                <Form.Item label="下单人身份证">
                  {getFieldDecorator(
                    'idCard',
                    {}
                  )(<Input allowClear placeholder="请输入下单人身份证号" />)}
                </Form.Item>
                {' '}
                <Form.Item label="订单编号">
                  {getFieldDecorator(
                    'orderId',
                    {}
                  )(<Input allowClear placeholder="请输入订单编号" />)}
                </Form.Item>
                <Form.Item
                  label="创建时间"
                >
                  {getFieldDecorator('createDate', {})(<RangePicker />)}
                </Form.Item>

              <div>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </Form.Item>
                <Form.Item>
                  <Button htmlType="button" onClick={this.handleReset}>
                    重置
                  </Button>
                </Form.Item>
                <Form.Item>
                  <Button onClick={this.onexport}>客勤导出</Button>
                </Form.Item>
              </div>


            {/* <Form.Item label="订单状态">
              {getFieldDecorator('status', {
                // initialValue: '',
              })(
                <Select
                  placeholder="订单状态"
                  allowClear
                  style={{ width: 180 }}
                  onChange={this.onChanges}
                >
                  {['01', '11', '04', '05', '06', '07', '08', '09', '10'].map(value => {
                    return (
                      <Option value={value.toString()} key={value.toString()}>
                        {orderStatusMap[value.toString()]}
                      </Option>
                    );
                  })}
                </Select>,
              )}
            </Form.Item> */}
            {/* {this.state.gBtusua === '10' ? ( */}
            {/*  <Form.Item label="关单类型"> */}
            {/*    {getFieldDecorator( */}
            {/*      'closeType', */}
            {/*      {}, */}
            {/*    )( */}
            {/*      <Select placeholder="关单类型" allowClear style={{ width: 180 }}> */}
            {/*        {orderCloseStatusMap.map(value => { */}
            {/*          return ( */}
            {/*            <Option value={value.value} key={value.value}> */}
            {/*              {value.content} */}
            {/*            </Option> */}
            {/*          ); */}
            {/*        })} */}
            {/*      </Select>, */}
            {/*    )} */}
            {/*  </Form.Item> */}
            {/* ) : null} */}
          </Form>
          {/* 状态控制栏 */}
          <Tabs
            defaultActiveKey={this.tabState.activeKey}
            onTabClick={this.tabClick}
            type="card"
          >
            {this.tabState.panes.map(pane => (
              <TabPane tab={`${pane.title}(${pane.count})`} key={pane.key} />
            ))}
          </Tabs>
          <Spin spinning={loading}>
            {/* 订单列表 */}
            <MyPageTable
              scroll
              onPage={this.onPage}
              paginationProps={paginationProps}
              dataSource={allListExt}
              columns={this.columns}
            />
          </Spin>
        </Card>
      </PageHeaderWrapper>
    )
  }
}
